'use client';

import HtmlLink from '@/app/components/common/html-link';
import { usePathname } from 'next/navigation';
import { VideoType } from '@/lib/video/video-service';
import { useEffect, useState } from 'react';

interface MobileNavProps {
  types: VideoType[];
}

export default function MobileNav({ types }: MobileNavProps) {
  const pathname = usePathname();
  
  // 当在详情页时，读取顶级分类ID，但我们只使用 setter
  const [, setDetailPageCategoryId] = useState<number | null>(null);
  
  // 当在详情页时，读取顶级分类ID
  useEffect(() => {
    if (pathname.startsWith('/detail/')) {
      const container = document.querySelector('[data-top-category-id]');
      if (container) {
        const categoryId = container.getAttribute('data-top-category-id');
        if (categoryId) {
          setDetailPageCategoryId(parseInt(categoryId, 10));
        }
      }
    } else {
      setDetailPageCategoryId(null);
    }
  }, [pathname]);

  // 修改判断逻辑，允许在播放详情页也显示底部导航
  // 播放详情页路径格式为 /detail/[id]
  // const isVideoPage = pathname.startsWith('/detail/');
  
  // 只有在播放详情页时不显示底部导航
  // if (isVideoPage) {
  //   return null;
  // }
  
  // 从所有分类中筛选出顶级分类(最多显示4个)
  const mainTypes = types
    .filter(type => !type.parentId)
    .slice(0, 4);
  
  return (
    <div className="sm:hidden fixed bottom-0 left-0 right-0 z-40 bg-gray-900/95 backdrop-blur-lg border-t border-gray-800 shadow-lg">
      <div className="flex items-center justify-around h-14">
        {/* 首页 */}
        <HtmlLink
          href="/"
          className="flex flex-col items-center justify-center w-1/5 py-1 text-gray-400 hover:text-gray-400"
        >
          <svg 
            xmlns="http://www.w3.org/2000/svg" 
            className="h-6 w-6" 
            fill="none" 
            viewBox="0 0 24 24" 
            stroke="currentColor"
          >
            <path 
              strokeLinecap="round" 
              strokeLinejoin="round" 
              strokeWidth={2} 
              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" 
            />
          </svg>
          <span className="nav-text text-app-sm mt-0.5">首页</span>
        </HtmlLink>
        
        {/* 顶级分类 */}
        {mainTypes.map((type) => (
          <HtmlLink
            key={type.id}
            href={`/type/${type.id}`}
            className="flex flex-col items-center justify-center w-1/5 py-1 text-gray-400 hover:text-gray-400"
          >
            {type.id === 1 && (
              <svg 
                xmlns="http://www.w3.org/2000/svg" 
                className="h-6 w-6" 
                fill="none" 
                viewBox="0 0 24 24" 
                stroke="currentColor"
              >
                <path 
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                  strokeWidth={2}
                  d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" 
                />
              </svg>
            )}
            {type.id === 2 && (
              <svg 
                xmlns="http://www.w3.org/2000/svg" 
                className="h-6 w-6" 
                fill="none" 
                viewBox="0 0 24 24" 
                stroke="currentColor"
              >
                <path 
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                  strokeWidth={2} 
                  d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" 
                />
              </svg>
            )}
            {type.id === 3 && (
              <svg 
                xmlns="http://www.w3.org/2000/svg" 
                className="h-6 w-6" 
                fill="none" 
                viewBox="0 0 24 24" 
                stroke="currentColor"
              >
                <path 
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                  strokeWidth={2} 
                  d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" 
                />
                <path 
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                  strokeWidth={2} 
                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" 
                />
              </svg>
            )}
            {type.id === 4 && (
              <svg 
                xmlns="http://www.w3.org/2000/svg" 
                className="h-6 w-6" 
                fill="none" 
                viewBox="0 0 24 24" 
                stroke="currentColor"
              >
                <path 
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                  strokeWidth={2} 
                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" 
                />
              </svg>
            )}
            <span className="nav-text text-app-sm mt-0.5">{type.name}</span>
          </HtmlLink>
        ))}
      </div>
    </div>
  );
} 